<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2024/10/28
  Time: 10:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门信息页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%--新增按钮--%>
    <el-button type="primary" @click="dialogVisible = true">新增<i class="el-icon-circle-plus-outline el-icon--right"></i></el-button>
    <%--刷新按钮--%>
    <el-button type="primary" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
<%--==============================================查询每个部门内的员工==================================================--%>
        <el-dialog
                title="该部门内的员工"
                :visible.sync="selectDialogVisible"
                width="50%"
               >
            <div v-if="selectForm.length>0">
                <el-table
                        :data="selectForm"
                        border
                        style="width: 100%"
                        >
                    <el-table-column
                            prop="staffid"
                            label="员工编号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="staffname"
                            label="员工姓名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="idcard"
                            label="身份证号码">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="电话号码">
                    </el-table-column>
                </el-table>
                <%--~~~~~~~~~~~~~~~~~~~~~~~内分页~~~~~~~~~~~~~~~~~~~~~--%>
                <el-pagination
                        @size-change="handleSizeChange02"
                        @current-change="handleCurrentChange02"
                        :current-page="currentPage02"
                        :page-sizes="[5,10,15,20]"
                        :page-size="pageSize02"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total02">
                </el-pagination>

            </div>
            <el-empty v-else description="该部门暂无员工"></el-empty>
        </el-dialog>
<%--=================================================修改的对话框=====================================================--%>
        <el-dialog
                title="修改部门信息"
                :visible.sync="editDialogVisible"
                width="50%"
                :before-close="handleClose"
                @closed="closeAdd">
            <el-form ref="form" :model="editform" :rules="rules" label-width="80px">
                </el-form-item>
                <el-form-item label="部门名称" prop="deptname">
                    <el-input v-model="editform.deptname"></el-input>
                </el-form-item>
                <el-form-item label="部门描述" prop="remark">
                    <el-input v-model="editform.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmEdit">确 定</el-button>
  </span>
        </el-dialog>
<%--=================================================新增的对话框=====================================================--%>
        <el-dialog
                title="添加部门"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose"
                @closed="closeAdd">
            <el-form ref="form" :model="addform" :rules="rules" label-width="80px">
                </el-form-item>
                <el-form-item label="部门名称" prop="deptname">
                    <el-input v-model="addform.deptname"></el-input>
                </el-form-item>
                <el-form-item label="部门描述" prop="remark">
                    <el-input v-model="addform.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmAdd">确 定</el-button>
  </span>
        </el-dialog>
<%--=================================================所有部门表单=====================================================--%>
    <template>
        <el-table
                :data="deptinfo"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="deptname"
                    label="部门名称"
            >
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="部门描述"
            >
            </el-table-column>
            <el-table-column
                    prop="counts"
                    label="人数">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="400px">
                <template slot-scope="scope">
                    <el-button size="small" type="success " @click="update(scope.row)" round>
                        编辑<i class="el-icon-edit el-icon--right"></i>
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteDept(scope.row)" round>
                        删除<i class="el-icon-delete el-icon--right"></i>
                    </el-button>
                    <el-button size="small" type="warning" @click="selectByDeptId(scope.row.deptid)" round>
                        搜索该部门的员工<i class="el-icon-search el-icon--right"></i>
                    </el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </template>
<%--~~~~~~~~~~~~~~~~~~~~~~~分页~~~~~~~~~~~~~~~~~~~~~--%>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,15,20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
</div>

</body>
<%--=======================================================js代码====================================================--%>
<script>
    let app = new Vue({
        el: '#app',
        data:{
            deptinfo:undefined,//所有部门信息
            currentPage: 1,//当前页码
            pageSize: 10,//每页显示条数
            total: 0,//总条数
            dialogVisible: false,//控制添加对话框是否显示
            addform:{},//新增表单数据
            editform:{},//修改表单数据
            editDialogVisible:false,//控制修改对话框是否显示
            selectDialogVisible:false,//控制搜索对话框是否显示
            selectForm:{},//搜索表单数据
            //内分页
            currentPage02: 1,//当前页码
            pageSize02: 5,//每页显示条数
            total02: 0,//总条数
            //校验规则
            rules:{
                deptname:[
                    {required:true,message:"部门名称不能为空",trigger:"blur"}
                ],
                remark:[
                    {required:true,message:"部门描述不能为空",trigger:"blur"}
                ]
            }
        },
        created() {
            this.getAllDept()
        },
        methods: {
            //搜索部门内的员工
            selectByDeptId(id) {
                this.deptid=id//保存部门id
                axios.get("/staff/selectByDeptId?deptid=" + id+
                    "&currentPage02=" + this.currentPage02 +
                    "&pageSize02=" + this.pageSize02).then(resp => {

                    this.selectForm = resp.data.data.list;
                    this.total02 = resp.data.data.total;
                })
                this.selectDialogVisible = true//显示对话框
            },
            //内分页~~~~~~~~~~~~~~~
            // 每页条数
            handleSizeChange02(val) {
                this.pageSize02 = val;
                this.selectByDeptId(this.deptid);
            },
            // 页码
            handleCurrentChange02(val) {
                this.currentPage02 = val;
                this.selectByDeptId(this.deptid);
            },
            //确认删除
            deleteDept(row) {
                if (row.counts > 0) {
                    this.$message({
                        type: "warning",
                        message: "该部门下有员工，无法删除"
                    })
                    return;
                }
                this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/dept/deleteDept?deptid=" + row.deptid).then(resp => {
                        if (resp.data.code === 200) {
                            this.$message({
                                type: "success",
                                message: "删除部门成功"
                            });
                            this.getAllDept();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            //确认修改
            confirmEdit() {
                axios.put("/dept/updateDept", this.editform).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: "修改部门信息成功"
                        })
                        this.editDialogVisible = false;//修改部门信息成功隐藏对话框
                        this.getAllDept();//刷新数据
                    } else {
                        this.$message({
                            type: "error",
                            message: resp.data.msg
                        })
                    }
                })
            },
            //数据回显
            update(row) {
                this.editDialogVisible = true;//显示对话框
                this.editform = row;//显示数据
            },
            //确认新增
            confirmAdd() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        axios.post("/dept/addDept", this.addform).then(resp => {
                            if (resp.data.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '添加员工成功!'
                                });
                                this.dialogVisible = false;
                                this.getAllDept();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: resp.data.msg
                                })
                            }
                        })
                    }
                })
            },
            //关闭对话框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //关闭对话框时重置表单
            closeAdd() {
                this.$refs.form.resetFields();
                this.addform = {};
            },
            //获取所有部门信息
            getAllDept() {
                axios.post("/dept/getAllDept?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize)
                    .then(resp => {
                        this.deptinfo = resp.data.data.list;
                        this.total = resp.data.data.total;
                    })
            },
            //刷新
            refresh() {
                this.getAllDept();//重新加载数据
            },
            // 每页条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.getAllDept();
            },
            // 页码
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getAllDept();
            },
            //表格中行的样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },
        }
    })
</script>
</html>
